<script setup>
import { ref, onMounted, inject } from 'vue';
import { ElMessage } from 'element-plus';
import {
  Aim, User, UserFilled, Avatar, Location, Setting,
  House, SwitchButton, HomeFilled, HelpFilled, ArrowRight
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { BREADCRUMBS, authorityMap, hasAuthority } from '@/plugins/global';

const axios = inject('axios'), router = useRouter();

// ---- 组件加载：获取员工/获取员工权限映射。
onMounted(() => {
  getStaff();
  getStaffAuthorityMap();
});

// ---- 获取员工：获取当前员工的信息并缓存。
const staffAvatar = ref("https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png");
const getStaff = () => {
  axios.get('/api/cms-web/staff/get').then(response => {
    if (response.data.success) {
      localStorage.setItem('info', JSON.stringify(response.data.data));
      if (response.data.data.avatar) {
        staffAvatar.value = response.data.data.avatar;
      }
    } else {
      ElMessage.error(response.data.message);
    }
  })
}
// ---- 获取员工权限映射：获取当前员工的权限映射并缓存。
const getStaffAuthorityMap = () => {
  axios.get('/api/cms-web/staff/get/my/authority/map/cache').then(response => {
    if (response.data.success) {
      // ---- 先清空旧权限，再获取新权限。
      authorityMap.clear();
      for (let [key, value] of Object.entries(response.data.data)) {
        let date = value ? new Date(value) : null;
        authorityMap.set(key, date);
      }
    } else {
      ElMessage.error(response.data.message);
    }
  })
}
// ---- 登出员工：令当前员工退出登录并跳转至登录页。
const logoutStaff = () => {
  // ---- 请求员工登出接口以实现后端登出。
  axios.post('/api/cms-web/oauth/logout').then(response => {
    if (response.data.success) {
      // ---- 删除缓存的令牌/信息/权限映射以实现前端登出。
      localStorage.removeItem('token');
      localStorage.removeItem('info');
      authorityMap.clear();
      ElMessage.success('登出成功！');
      router.push('/');
    } else {
      ElMessage.error(response.data.message);
    }
  });
}
</script>

<template>
  <div class="page-div-class">
    <!-- 左上格视图：Logo -->
    <div class="logo-div-class">
    </div>
    <!-- 右上格视图：头像/信息/登出 -->
    <div class="avatar-div-class">
      <div>
        <el-breadcrumb :separator-icon="ArrowRight" v-if="BREADCRUMBS != null && BREADCRUMBS.length > 0">
          <el-breadcrumb-item v-for="(item, index) in BREADCRUMBS" :key="index" :to="{ path: item.path }">
            <span style=" font-weight: bold; color: #fff;">{{ item.label }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-dropdown trigger="click">
          <el-avatar :size="25" :src="staffAvatar" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="House">个人中心</el-dropdown-item>
              <el-dropdown-item divided :icon="SwitchButton" @click="logoutStaff()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 左下格视图：菜单 -->
    <div class="menu-div-class">
      <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
        style="width: 100%; height: 100%; border:  solid #545c64" default-active="0">
        <!-- 跳转首页并重置面包屑。首页的面包屑不能在onMounted中设置，因为首页是母页，刷新时
         会覆盖子页的面包屑，即在存在子页的情况下无法显示子页的面包屑。 -->
        <el-menu-item index="0" @click="router.push('/home'); BREADCRUMBS.splice(0, BREADCRUMBS.length);">
          <template #title>
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="1" v-if="hasAuthority('root/user')">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="1-1" @click="router.push('/home/customer_list')"
            v-if="hasAuthority('root/user/customer')">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>客户列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="1-2" @click="router.push('/home/staff_list')" v-if="hasAuthority('root/user/staff')">
            <template #title>
              <el-icon>
                <Avatar />
              </el-icon>
              <span>员工列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="2" @click="router.push('/home/app_list')" v-if="hasAuthority('root/app')">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>应用列表</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="3" v-if="hasAuthority('root/system')">
          <template #title>
            <el-icon>
              <setting />
            </el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="3-1" @click="router.push('/home/authority_tree')"
            v-if="hasAuthority('root/system/authority')">
            <template #title>
              <el-icon>
                <Aim />
              </el-icon>
              <span>权限树</span>
            </template>
          </el-menu-item>
          <el-menu-item index="3-2" @click="router.push('/home/role_list')" v-if="hasAuthority('root/system/role')">
            <template #title>
              <el-icon>
                <HelpFilled />
              </el-icon>
              <span>角色列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 右下格视图：子页面 -->
    <div class="view-div-class">
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.page-div-class {
  /* ---- 网格布局：两行 - 4:96，两列 - 15:85，间隙 - 1 */
  display: grid;
  grid-template-rows: 4fr 96fr;
  grid-template-columns: 15fr 85fr;
  gap: 1px;
  /* ---- 宽度/高度：100%/100% */
  height: 100%;
  width: 100%;
}

.logo-div-class {
  background-color: #545c64;
  border: 1px solid black;
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.avatar-div-class {
  /* ---- 盒子布局：主轴 - 横轴/左头右尾/首尾；副轴 - 纵轴/上头下尾/居中 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* ---- 左/右内边距：10/10像素 */
  padding: 0 10px 0 10px;
  background-color: #545c64;
  border: 1px solid black;
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.menu-div-class {
  /* ---- 盒子布局：主轴 - 横轴/左头右尾/居头；副轴 - 纵轴/上头下尾/居头 */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #545c64;
  border: 1px solid black;
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.view-div-class {
  border: 1px solid black;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  /* ---- 溢出：自动，即内容超出时滚动 */
  overflow: auto;
  box-sizing: border-box;
}
</style>